import React from 'react';
import {connect} from "react-redux";
import {bindActionCreators} from "redux";
import * as Action from "../actions";

class Product extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return <li>
            <p><a><img src={this.props.dish.icon} /></a></p>
            <div className="introduction">
                <h5>{this.props.dish.name}</h5>
                <span className="description">{this.props.dish.description}</span>
                <div className="info">
                    <a>￥{this.props.dish.price}</a>
                    <p>{this.props.dish.quantity}</p>
                    <div>
                        <span className="jiabtn" onClick={()=>{this.props.actions.add(this.props.dish)}}>+</span>
                    </div>
                </div>
            </div>
        </li>
    }
}
export default connect(
    ({foodReducer})=>{  
        return {
            shop:foodReducer.shop
        }     
    },
    (dispatch) => {
        return {
            actions: bindActionCreators(Action,dispatch)
        }
    }
)(Product)